<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="c.tld" %>
<%@ taglib prefix="pager" uri="pager.tld" %>
<%@ taglib prefix="fn" uri="fn.tld" %>
<%@ taglib prefix="cmore" uri="cmore.tld" %>
<%@ taglib prefix="fmt" uri="fmt.tld" %>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hyper - Responsive Bootstrap 4 Admin Dashboard</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
        <meta content="Coderthemes" name="author" />
        <!-- App favicon -->
        <link rel="shortcut icon" href="${ctx}/theme/hyper/images/favicon.ico">

        <!-- third party css -->
        <link href="${ctx}/theme/hyper/css/vendor/dataTables.bootstrap4.css" rel="stylesheet" type="text/css" />
        <link href="${ctx}/theme/hyper/css/vendor/responsive.bootstrap4.css" rel="stylesheet" type="text/css" />
        <link href="${ctx}/theme/hyper/css/vendor/buttons.bootstrap4.css" rel="stylesheet" type="text/css" />
        <link href="${ctx}/theme/hyper/css/vendor/select.bootstrap4.css" rel="stylesheet" type="text/css" />
        <!-- third party css end -->

        <!-- App css -->
        <link href="${ctx}/theme/hyper/css/icons.min.css" rel="stylesheet" type="text/css" />
        <link href="${ctx}/theme/hyper/css/app.min.css" rel="stylesheet" type="text/css" />

    </head>

    <body>

        <!-- Begin page -->
        <div class="wrapper">

            <!-- ========== Left Sidebar Start ========== -->
            <jsp:include page="../left.jsp"></jsp:include>
            <!-- Left Sidebar End -->

            <!-- ============================================================== -->
            <!-- Start Page Content here -->
            <!-- ============================================================== -->

            <div class="content-page" id = "qiu_vue">
                <form action="${ctx}/userincome/list" method="get" id="topSub">
                    <div class="content">

                        <!-- Start Content-->
                        <div class="container-fluid">
                            <%--tab--%>
                            <div class="row">
                                <div class="col-12">
                                    <ul class="nav nav-pills bg-light nav-justified mb-3">
                                        <li class="nav-item">
                                            <a href="#body1" onclick="seachDeitorList()" data-toggle="tab" aria-expanded="false" class="nav-link active">
                                                <i class="mdi mdi-account-circle font-18"></i>
                                                <span class="d-none d-lg-block">收益走势图</span>
                                            </a>
                                        </li>

                                        <li class="nav-item">
                                            <a href="#listUserincomeRow" onclick="seachList()" data-toggle="tab" aria-expanded="true" class="nav-link">
                                                <i class="mdi mdi-truck-fast font-18"></i>
                                                <span class="d-none d-lg-block">收益记录</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                                
                            <%--seach--%>
                            <div class="navbar-custom">
                                <div class="app-search">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="topCondition" name="topCondition"
                                               value="${topCondition}" placeholder="账号">
                                        <span class="mdi mdi-magnify"></span>
                                        <div class="input-group-append" id = "userincomeSeack">
                                            <button class="btn btn-primary" type="button" >搜索</button>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="row">
                                <div class="col-12">
                                    <div class="tab-content">
                                        <div class="tab-pane " id="listUserincomeRow">
                                            <h4 class="header-title">收益记录</h4>
                                            <table id="basic-datatable" class="table dt-responsive nowrap" width="100%">
                                                <thead>
                                                <tr>
                                                    <th>ID</th>
                                                    <th>时间</th>
                                                    <th>收益</th>
                                                </tr>
                                                </thead>
                                                <c:if test="${fn:length(departments) > 0}">
                                                    <tbody id="incomeList">
                                                    <c:forEach var="item" items="${departments}">
                                                        <tr>
                                                            <td>${item.entityid}</td>
                                                            <td><fmt:formatDate value="${item.datatime}" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate></td>
                                                            <td>${ item.money}</td>
                                                        </tr>
                                                    </c:forEach>
                                                    </tbody>
                                                </c:if>

                                            </table>
                                            <pager:pageHyper/>
                                        </div>
                                        <div class="tab-pane show active" id = "body1" >

                                            <div id="main" style="width: 100%;height: 78%">

                                            </div>
                                        </div>
                                    </div>
                                </div><!-- end col-->
                            </div>
                            <!-- end row-->

                        </div> <!-- container -->

                    </div> <!-- content -->
                </form>

            </div>

            <!-- ============================================================== -->
            <!-- End Page content -->
            <!-- ============================================================== -->

        </div>
        <!-- END wrapper -->



        <!-- App js -->
        <script src="${ctx}/theme/hyper/js/app.min.js"></script>

        <!-- third party js -->
        <script src="${ctx}/theme/hyper/js/vendor/jquery.dataTables.js"></script>
        <script src="${ctx}/theme/hyper/js/vendor/dataTables.bootstrap4.js"></script>
        <script src="${ctx}/theme/hyper/js/vendor/dataTables.responsive.min.js"></script>
        <script src="${ctx}/theme/hyper/js/vendor/responsive.bootstrap4.min.js"></script>
        <script src="${ctx}/theme/hyper/js/vendor/dataTables.buttons.min.js"></script>
        <script src="${ctx}/theme/hyper/js/vendor/buttons.bootstrap4.min.js"></script>
        <script src="${ctx}/theme/hyper/js/vendor/buttons.html5.min.js"></script>
        <script src="${ctx}/theme/hyper/js/vendor/buttons.flash.min.js"></script>
        <script src="${ctx}/theme/hyper/js/vendor/buttons.print.min.js"></script>
        <script src="${ctx}/theme/hyper/js/vendor/dataTables.keyTable.min.js"></script>
        <script src="${ctx}/theme/hyper/js/vendor/dataTables.select.min.js"></script>
        <!-- third party js ends -->

        <!-- vue -->

        <script src="https://cdn.jsdelivr.net/npm/vue"></script>

        <!-- 引入 echarts.js -->
        <script src="${ctx}/common/script/util/echarts.min.js"></script>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <script src="${ctx}/common/script/jQuery/jquery-1.11.3.js"></script>
        <script src="${ctx}/common/script/editor.js?v=${ggversion}"></script>
        <script>
            var basePath = '${ctx}';

            var date = [];

            var data = []; //Math.random() * 300
        </script>

        <!-- demo app -->
        <!-- end demo js-->

        // 绑定
        <script type="text/javascript">
            $("#userincomeSeack").on("click","button", function(){
               console.log("查询收益折线图");
            });

            function seachList() {
                console.log("收益列表")
                $("#userincomeSeack").unbind("click");
                $("#userincomeSeack").on("click","button", function(){
                    console.log("查询收益列表");
                    getList();
                });
            }

            function getList() {
                $.ajax({
                    type:"GET",
                    url:"${ctx}/userincome/list",
                    data:$('#topSub').serialize(),
                    dataType:"html",
                    success:function (data) {
                        $("#listUserincomeRow").html(data);
                    }
                })
            }

            function seachDeitorList() {
                console.log("收益折线图")
                $("#userincomeSeack").unbind("click");
                $("#userincomeSeack").on("click","button", function(){
                    console.log("查询收益折线图");
                    getDeitor();
                });
            }

            // 基于准备好的dom，初始化echarts实例

            // 获取数据
            function getDeitor(){
                $.ajax({
                    url:"${ctx}/userincome/ajaxList",
                    type:'POST',
                    data:$('#topSub').serialize(),
                    dataType:'json',
                    success:function(income){
                        console.log("${ctx}/userincome/ajaxList");
                        date = [];
                        data = [];
                        for (var i = 1; i < income.list.length; i++) {
                            date.push(income.list[i].fullDate);
                            data.push(income.list[i].value);
                        }

                        creatCharts("main");
                    },
                    error:function(xhr,textStatus,errorThrown){
                        for (var i = 1; i < 100; i++) {
                            date.push(1);
                            data.push(1);
                        }
                        creatCharts("main");
                    }
                });
            }
        </script>
    </body>
</html>
